<template>
  <div class="maintabbar">
    <tab-bar bgc="#e1251b">
      <template>
        <tab-bar-item v-for="(value,key) in tabbar_item" :key="key" @click.native="tabItemC(value)">
          <template #active_img>
            <div class="active_img" v-show="$route.path==value.path">
              <img :src="value.active_img" alt />
            </div>
          </template>
          <template #img>
            <div class="img" v-show="$route.path!=value.path">
              <img :src="value.img" alt />
            </div>
          </template>
          <template #text>
            <span :class="{white:$route.path==value.path}">{{value.text}}</span>
            
          </template>
        </tab-bar-item>
      </template>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from "components/public/tabbar/TabBar";
import TabBarItem from "components/public/tabbar/TabBarItem";
export default {
  name: "MainTabBar",
  data() {
    return {
      tabbar_item: {
        home: {
          active_img: require("assets/images/tabbar/home_active.png"),
          img: require("assets/images/tabbar/home.png"),
          text: "首页",
          path:'/home'
        },
        categroy: {
          active_img: require("assets/images/tabbar/categroy_active.png"),
          img: require("assets/images/tabbar/categroy.png"),
          text: "分类",
          path:'/categroy'
        },
        cart: {
          active_img: require("assets/images/tabbar/cart_active.png"),
          img: require("assets/images/tabbar/cart.png"),
          text: "购物车",
          path:'/cart'
        },
        profile: {
          active_img: require("assets/images/tabbar/profile_active.png"),
          img: require("assets/images/tabbar/profile.png"),
          text: "我的",
          path:'/profile'
        }
      }
    };
  },
  methods:{
    tabItemC(value){
      this.$router.replace(value.path)
      
    }
  },
  components: {
    TabBar,
    TabBarItem
  }
};
</script>

<style lang="less" scoped>
.maintabbar{
  position: fixed;
  bottom: 0PX;
  right: 0PX;
  left: 0PX;
  z-index: 1;
}
</style>